<template>
	<view class="box">
		<Header :title="t('control.title')" />
		<view class="img-box">
			<up-image
				height="21vh"
				:src="'/static/image/device/' + deviceImg + '.png'"
				mode="aspectFill"></up-image>
		</view>
		<bottomControl ref="bottomRef" :device_sn="device_sn" type="control" />
	</view>
</template>

<script setup lang="ts">
import Header from "@/components/header/index.vue";
import { useI18n } from "vue-i18n";
import { onLoad } from "@dcloudio/uni-app";
const { t } = useI18n();
import { ref, watch, computed, getCurrentInstance } from "vue";
import bottomControl from "./bottomControl.vue";
const instance: any = getCurrentInstance();
const version: any = instance?.proxy?.$appVersion;
const showBot = ref("5px");
const defaultDevice: any = useUniversalStorage("DefaultDevice", {});
const device_sn = ref("");
// 计算属性方式获取图片名称
const deviceImg = computed<string>(() => {
	if (defaultDevice.value?.model_id === "YZYH") {
		showBot.value = "120rpx";
		return "yz";
	} else if (defaultDevice.value.model_id === "LCYH") {
		return "lc";
	} else {
		return version === "xz" ? "xg_xz" : "xg";
	}
});
onLoad(async (options) => {
	if (options?.device_sn) {
		device_sn.value = options.device_sn;
	}
});
</script>

<style lang="scss" scoped>
.box {
	background-color: #fff;
	height: 100vh;
}
.img-box {
	margin-top: v-bind(showBot);
	display: flex;
	width: 100%;
	max-height: 28vh;
	padding: 5px;
	box-sizing: border-box;
	justify-content: center;
}
</style>
